<%--
  Created by IntelliJ IDEA.
  User: 94765
  Date: 2021/12/1
  Time: 10:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>注册</title>
    <style>
        #msg {
            color: red;
        }
    </style>
</head>
<body>
<form action="/admin/register" method="post">
    账号：<input type="text" name="account" id="account"><span id="msg"></span><span id="msg2">${msg}</span><br>
    密码：<input type="password" name="pass" id="pass"><br>
    再次输入密码：<input type="password" id="repass"><br>
    <input type="hidden" name="method" value="zhuce"><br>
    <input type="submit" value="注册"><input type="reset" value="重置">
</form>
<script>
    var e_account = document.getElementById("account");
    var e_pass = document.getElementById("pass");
    var e_repass = document.getElementById("repass");
    var e_msg = document.getElementById("msg");
    //1.当页面加载完成后，账号获取焦点
    window.onload = function () {
        e_account.focus();
    }

    //2.给账号添加失去焦点验证
    e_account.onblur = function () {
        //账号不能为空
        if (this.value == ''){
            // 给出提示信息
            e_msg.innerText = "账号不能为空";
            this.focus();
        }else {
            e_msg.innerText = "";
        }
    }

    //3.给密码添加失去焦点验证
    e_pass.onblur = function () {
        //账号不能为空
        if (this.value == ''){
            // 给出提示信息
            e_msg.innerText = "密码不能为空";
            this.focus();
        }else {
            e_msg.innerText = "";
        }
    }

    //4.给再次输入密码添加失去焦点验证
    e_repass.onblur = function () {
        //账号不能为空
        if (this.value != e_pass.value){
            // 给出提示信息
            e_msg.innerText = "两次输入密码应该一致";
            this.value = "";
            this.focus();
        }else {
            e_msg.innerText = "";
        }
    }

    // 5.注册按钮添加表单提交校验
    document.getElementsByTagName("form")[0].onsubmit = function () {
        //账号不能为空
        if (e_account.value == ''){
            // 给出提示信息
            e_msg.innerText = "账号不能为空";
            e_account.focus();
            return false;
        }else {
            e_msg.innerText = "";
        }

        // 密码不能为空
        if (e_pass.value == ''){
            // 给出提示信息
            e_msg.innerText = "密码不能为空";
            e_pass.focus();
            return false;
        }else {
            e_msg.innerText = "";
        }

        //再次输入密码必须一致
        if (e_repass.value != e_pass.value){
            // 给出提示信息
            e_msg.innerText = "两次输入密码应该一致";
            e_repass.value = "";
            e_repass.focus();
            return false;
        }else {
            e_msg.innerText = "";
        }

        return true;
    }
</script>
</body>
</html>

